import Vue from 'vue'
import VueRouter from 'vue-router'

// ---------------------------------------------
// 下面导入的是二级导航
// layout首页
import Layout from '@/views/layout'
import Home from '@/views/layout/home'
// 分类页
import Category from '@/views/layout/category'
// 购物车页
import Cart from '@/views/layout/cart'
// 用户中心页
import User from '@/views/layout/user'
// 我们需要拿到token 需要先从user模块中 获取token 所以我们这里导入
import store from '@/store'

// ---------------
// 导入路由组件 如果我们导入的文件夹当中只有一个文件，我们直接导入文件夹即可
const Login = () => import('@/views/login')
const Search = () => import('@/views/search')
const SearchList = () => import('@/views/search/searchList.vue')
// 商品详情页
const ProDetail = () => import('@/views/prodetail')
// pay结算支付页
const Pay = () => import('@/views/pay')
// 订单管理页
const MyOrder = () => import('@/views/myorder')

Vue.use(VueRouter)
// 这个JS文件是配置路由规则的

const router = new VueRouter({
  // 二级路由是要写到一级路由当中 关键字children
  routes: [
    { path: '/login', component: Login },
    {
      path: '/',
      component: Layout,
      // 重定向到home页 防止用户刚进入页面的时候没有home页
      redirect: '/home',
      children: [
        { path: '/home', component: Home },
        { path: '/category', component: Category },
        { path: '/cart', component: Cart },
        { path: '/user', component: User }
      ]
    },
    { path: '/search', component: Search },
    { path: '/searchlist', component: SearchList },
    // 商品详情页 我们需要知道是哪一个商品所以使用了动态路由在路由参数中携带id
    { path: '/prodetail/:id', component: ProDetail },
    { path: '/pay', component: Pay },
    { path: '/myorder', component: MyOrder }
  ]
})
// 切记: 所有的路由在真正被访问到之前,都会先经过全局前置守卫
// 只有全局前置守卫放行了,才会到达对应的页面

// 定义一个数组,专门存放用户所需要权限访问的页面 pay支付页  myorder我的订单页
const authUrls = ['/pay', '/myorder']

// 配置全局导航守卫 未登录的用户不可用进入敏感的页面比如: 支付页,订单页
// 参数中的to表示 即将要进入的完整的路由信息对象 对象中包含(路径,参数等等)
// from表示 从哪里来的完整的路由信息对象 对象中包含(路径,参数等等)
// next()表示 是否放行函数
// 如果是next() 表示就直接放行   如果是next(路径) 进行拦截 拦截到next配置的路径
router.beforeEach((to, from, next) => {
  // console.log(to, from, next)
  // next() // 我们直接写next() 就可以放行 所有的页面都可以访问
  // 看to.path是否在authUrls数组中出现 如果出现 说明用户需要授权才能访问的页面
  if (!authUrls.includes(to.path)) {
    // 非权限页面 直接放行
    next()
    return
  }
  // 权限页面,需要判断token
  const token = store.getters.token
  // 判断token是否存在 如果存在放行 如果不存在则拦截到登录页
  if (token) {
    // token存在,说明用户已经登录了,直接放行
    next()
  } else {
    next('/login')
  }
})

export default router
